<template>
	<view>
		<view>
			<u-tabs bg-color="#fff" ref="uTabs" :bar-width="160" 
			:bar-style="{background:'#20cbd4'}" active-color="#20cbd4" 
			:list="list" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs>
		</view>
		<swiper class="swiper" :current="swiperCurrent" @change="handleSwperChange">
			<swiper-item>
				<scroll-view class="swiper" scroll-y>
					<empty v-if="isEmpty&&isShow" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
					<view class="orderItem" v-if="!isEmpty&&isShow" v-for="(item, index) in saleList">
						<view class="orderStatus">
							<view class="order_no">No.{{item.order_master.order_no}}</view>
							<view class="status_txt">申请中</view>
						</view>		
						<view>
							<view class="goodsBox">
								<view class="goods_img">
									<image :src="item.order_master.goods_image"></image>
								</view>
								<view class="goods_info">
									<view class="goods_title u-line-2">{{item.order_master.goods_name}}</view>
									<view class="goods_norms u-line-1">数量：{{item.order_master.num}}</view>
									<view class="price_box">
										<view style="margin-right: 20rpx;">¥{{item.order_master.goods_price}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="afterSale_info">
							<view>
								<text style="font-weight: bold;">申请原因：</text>
								<text>{{item.user_refund_desc}}</text>
							</view>
							<view class="u-line-2" style="margin-top: 20rpx;">
								<text style="font-weight: bold;">相关描述：</text>
								<text>{{item.apply_desc}}</text>
							</view>
							<view class="remarkImg">
								<image v-for="res in item.image" :src="res.file.file_url"></image>
							</view>
						</view>
						<view class="footer">
							<view class="footer_info">
								<view>运费：¥{{item.order_master.express_price}}</view>
								<view>实付款：¥{{item.order_master.pay_price}}</view>
							</view>
							<view class="btn_part">
								<view>
									<u-button @click="cancelCheck(item.order_refund_id)" size="mini" :custom-style="{background:'#20cbd4',color:'#fff'}">取消申请</u-button>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" color="#909399" v-if="!isEmpty&&isShow"/>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="swiper" scroll-y>
					<empty v-if="isEmpty&&isShow" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
					<view class="orderItem" v-if="!isEmpty&&isShow" v-for="(item, index) in saleList">
						<view class="orderStatus">
							<view class="order_no">No.{{item.order_master.order_no}}</view>
							<view class="status_txt">处理中</view>
						</view>		
						<view>
							<view class="goodsBox">
								<view class="goods_img">
									<image :src="item.order_master.goods_image"></image>
								</view>
								<view class="goods_info">
									<view class="goods_title u-line-2">{{item.order_master.goods_name}}</view>
									<view class="goods_norms u-line-1">数量：{{item.order_master.num}}</view>
									<view class="price_box">
										<view style="margin-right: 20rpx;">¥{{item.order_master.goods_price}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="afterSale_info">
							<view>
								<text style="font-weight: bold;">申请原因：</text>
								<text>{{item.user_refund_desc}}</text>
							</view>
							<view class="u-line-2" style="margin-top: 20rpx;">
								<text style="font-weight: bold;">相关描述：</text>
								<text>{{item.apply_desc}}</text>
							</view>
							<view class="remarkImg">
								<image v-for="res in item.image" :src="res.file.file_url"></image>
							</view>
							<view class="u-line-2" style="margin-top: 20rpx;">
								<text style="font-weight: bold;">申请结果：</text>
								<text>已同意，请发货至以下地址</text>
							</view>
							<view style="margin-top: 20rpx;color: #909399;">
								<view>
									<text>{{item.name}}</text>
									<text style="margin-left: 15rpx;">{{item.phone}}</text>
								</view>
								<text>{{item.address}}</text>
							</view>
						</view>
						<view class="footer">
							<view class="footer_info">
								<view>运费：¥{{item.order_master.express_price}}</view>
								<view>实付款：¥{{item.order_master.pay_price}}</view>
							</view>
							<view class="btn_part" v-if="item.is_user_send == 0">
								<view>
									<u-button @click="openModel(item.order_refund_id)" size="mini" :custom-style="{background:'#20cbd4',color:'#fff'}">我已发货</u-button>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" color="#909399" v-if="!isEmpty&&isShow"/>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="swiper" scroll-y>
					<empty v-if="isEmpty&&isShow" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
					<view class="orderItem" v-if="!isEmpty&&isShow" v-for="(item, index) in saleList">
						<view class="orderStatus">
							<view class="order_no">No.{{item.order_master.order_no}}</view>
							<view class="status_txt">已完成</view>
						</view>		
						<view>
							<view class="goodsBox">
								<view class="goods_img">
									<image :src="item.order_master.goods_image"></image>
								</view>
								<view class="goods_info">
									<view class="goods_title u-line-2">{{item.order_master.goods_name}}</view>
									<view class="goods_norms u-line-1">数量：{{item.order_master.num}}</view>
									<view class="price_box">
										<view style="margin-right: 20rpx;">¥{{item.order_master.goods_price}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="afterSale_info">
							<view>
								<text style="font-weight: bold;">申请原因：</text>
								<text>{{item.user_refund_desc}}</text>
							</view>
							<view class="u-line-2" style="margin-top: 20rpx;">
								<text style="font-weight: bold;">相关描述：</text>
								<text>{{item.apply_desc}}</text>
							</view>
							<view class="remarkImg">
								<image v-for="res in item.image" :src="res.file.file_url"></image>
							</view>
							<view class="u-line-2" style="margin-top: 20rpx;">
								<text style="font-weight: bold;">申请结果：</text>
								<text v-if="item.is_agree == 10">通过</text>
								<text v-if="item.is_agree == 20">不通过</text>
								
							</view>
							<view class="u-line-2" style="margin-top: 20rpx;" v-if="item.is_agree == 20">
								<text style="font-weight: bold;">拒绝原因：</text>
								<text>{{item.refuse_desc}}</text>
							</view>
							<view style="margin-top: 20rpx;color: #909399;" v-if="item.is_agree == 10">
								<view>
									<text>{{item.name}}</text>
									<text style="margin-left: 15rpx;">{{item.phone}}</text>
								</view>
								<text>{{item.address}}</text>
							</view>
						</view>
						<view class="footer">
							<view class="footer_info">
								<view>运费：¥{{item.order_master.express_price}}</view>
								<view>实付款：¥{{item.order_master.pay_price}}</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" color="#909399" v-if="!isEmpty&&isShow"/>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-modal width="auto" v-model="modelShow" :show-title="false"
		confirm-color="#20cbd4" :show-cancel-button="true" @cancel="cancel" @confirm="confirm">
			<view class="modelContent">
				<view class="accountData" @click="showRegionPicker">
					<text>快递公司：</text>
					<input disabled type="text" v-model="express_name"/>
				</view>
				<u-picker mode="selector" v-model="show" :range="expressList" range-key="express_name" @cancel="cancel1" @confirm="confirm1"></u-picker>
				<view class="accountData">
					<text>快递单号：</text>
					<u-input v-model="trackingNumber"
						placeholder="请输入快递单号"/>
				</view>
				<!-- <view class="accountData">
					<text>退款金额：¥</text>
					<u-input :disabled="true" value="9999.99"/>
				</view> -->
				<view class="model_remark">
					退款会在快递签收之日的7个工作日内原路返回至付款账号
				</view>
			</view>
		</u-modal>
		<u-modal v-model="saleShow"  :show-cancel-button="true" content="您确定要取消申请吗？" @cancel="cancel2" @confirm="confirm2"></u-modal>
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {timeLimitedRefundLists,timeLimitedRefundCancel,timeLimitedRefundDelivery,expressList} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				list: [{
					name: '申请中'
				}, {
					name: '处理中'
				}, {
					name: '已完成'
				}],
				current: 0,
				swiperCurrent: 0,
				modelShow:false,
				express_id:"",
				express_name:"",
				trackingNumber:"",
				saleList: [],
				show:false,
				expressList:[],//物流公司列表
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				isEmpty:false,
				emptyImg:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/empty_goods.png",
				emptyTxt:"暂无售后信息",
				order_refund_id:"",
				saleShow:false,
				isShow:false,
				isSearch:false,
			};
		},
		onShow(){
			expressList(this,{});
			this.saleList=[];
			this.pageStart = 1;
			this.selectRefundLists();
		},
		onReachBottom(){
			if(this.total/(this.pageStart*this.pageSize)>1){
				this.pageStart++;
				this.selectRefundLists();
			}else{
				this.status = 'nomore';
			}
		},
		onBackPress(e) {
			if(e.from==="backbutton" || e.from==="navigateBack") {
				uni.redirectTo({
					url: '/user/seckillOrderList?swiperCurrent=0'
				})
				return true
			}
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectRefundLists(){
				timeLimitedRefundLists(this,{page:this.pageStart,limit:this.pageSize,status:this.current})
			},
			//取消申请
			cancelCheck(order_refund_id){
				this.saleShow = true;
				this.order_refund_id = order_refund_id;
			},
			tabsChange(index) {
				this.isShow = false;
				this.isEmpty = false;
				this.swiperCurrent = index;
			},
			handleSwperChange(e){
				this.isShow = false;
				this.isEmpty = false;
				this.isSearch = true;
				this.current = e.detail.current;
				if(this.isSearch){
					this.isSearch = false;
					//每次切换时重新查询数据
					this.saleList=[];
					this.pageStart = 1;
					this.selectRefundLists();
				}
			},
			//快递公司
			showRegionPicker() {
				this.show = true;
			},
			confirm1(res){
				this.express_id = this.expressList[res].express_id;
				this.express_name = this.expressList[res].express_name;
				this.show=false;
			},
			cancel1(){
				this.show=false;
			},
			//弹出填写快递单
			openModel(order_refund_id){
				this.order_refund_id = order_refund_id;
				this.modelShow=true;
			},
			confirm(){
				this.modelShow=false;
				timeLimitedRefundDelivery(this,{express_id:this.express_id,express_no:this.trackingNumber,order_refund_id:this.order_refund_id})
			},
			cancel(){
				this.modelShow=false;
			},
			//取消售后申请
			confirm2(){
				this.saleShow=false;
				timeLimitedRefundCancel(this,{order_refund_id:this.order_refund_id})
			},
			cancel2(){
				this.saleShow=false;
			},
		}
	};
</script>
<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.swiper{
		width: 100%;
		height: calc(100vh - var(--window-top));
		padding-bottom: 80rpx;
	}
	.orderItem{
		margin: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}
	.orderStatus{
		display: flex;
		justify-content: space-between;
	}
	.order_no{
		color: #909399;
	}
	.status_txt{
		color: #20cbd4;
	}
	.goodsBox{
		margin-top: 20rpx;
		display: flex;
		align-items: stretch;
		padding-top: 20rpx;
		border-top:0.5rpx solid #E4E7ED;
	}
	.goods_img{
		width: 180rpx;
		height: 180rpx;
		margin-right: 10rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		width: 500rpx;
	}
	.goods_info view{
		margin-top: 10rpx;
	}
	.goods_title{
		font-size: 30rpx;
	}
	.goods_norms{
		font-size: 25rpx;
		color: #909399;
	}
	.price_box{
		display: flex;
		align-items: flex-end;
		margin-bottom: 10rpx;
		height: 50rpx;
	}
	.btn_part{
		display: flex;
		justify-content: flex-end;
	}
	.btn_part view{
		margin-left: 20rpx;
	}
	.footer{
		border-top:0.5rpx solid #E4E7ED;
		padding-top: 10rpx;
		margin-top: 10rpx;
	}
	.footer_info{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 25rpx;
		color: #909399;
		margin-bottom: 10rpx;
	}
	.footer_info view{
		margin-left: 10rpx;
	}
	.afterSale_info{
		background-color: #f6f6f6;
		border-radius: 15rpx;
		padding: 20rpx;
		margin-top: 10rpx;
	}
	.remarkImg{
		margin-top: 20rpx;
		display: flex;
	}
	.remarkImg image{
		width: 120rpx;
		height: 120rpx;
		margin-right: 15rpx;
	}
	.modelContent{
		padding: 40rpx;
	}
	.accountData{
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		border-bottom: 0.5rpx solid #E4E7ED;
	}
	.model_remark{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #909399;
	}
</style>

